<!-- Dom模板 -->
<template> 
  <div class="searchpage">
    <!-- Dom内容 -->
    <div class="search-box">
      <div class="search-top">
        <p class="iconfont icon-iconfontyoujiantou-zuo" @click="close"></p>
        <input type="text" placeholder="宿主又在崩剧情" v-model="title" @change="searchs"/>
        <p @click="searchPage">搜索</p>
      </div>
      <div class="search-main">
        <div class="search-history">
          <div class="history-top">
            <h3>历史记录</h3>
            <p class="iconfont icon-lajitong1" @click="clear"></p>
          </div>
          <div class="history-main" ref="historySearch" @click="biaoqian">
            <span v-for="(item,index) in $store.state.search.titleArr" :key="index" >{{item}}</span>
          </div>
        </div>
        <div class="search-tuij">
          <div class="history-top">
            <h3>推荐好书</h3>
            <p class="iconfont icon--refresh" @click="shuaxin"></p>
          </div>
          <div class="history-main" @click="biaoqian">
                <span v-for="(item,index) in $store.state.search.refrshData" :key="index">{{item.bookname}}</span>
          </div>
        </div>
        <div class="search-pai">
          <div class="history-top">
            <h3>精品排行</h3>
          </div>
          <div class="pai-main" ref="pai">
            <div>
               <li v-for="(item, index) in $store.state.search.tenData.slice(0,5)" :key="index" @click="biaoqian">
                  <span>{{ index+1 }}</span>
                  <span>{{ item.bookname }}</span>
                </li>
            </div>
            <div>
                  <li v-for="(item, index) in $store.state.search.tenData.slice(5)" :key="index" @click="biaoqian">
                    <span>{{ index+6 }}</span>
                    <span>{{ item.bookname }}</span>
                  </li>
            </div>
            
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      searchData:[],//搜索出来的数据 筛选的数据
      title:'',
      dataList:[],//全部的数据
      refrshData:[]
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
      this.$store.dispatch('bags/getBookData').then(res=>{
      this.dataList = res.info
      // console.log(this.dataList)
       this.$store.dispatch('search/getTenData')
    })
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() { 
    // setTimeout(()=>{
          
    // },100)
  
  },
  // Vue方法定义
  methods: {
    close() {
      // this.$router.history.push('/home')
      this.$router.history.push(this.$store.state.bags.querpath)
    },
    searchPage(){//存入vuex和跳转的功能
        // console.log(this.title)
        this.$store.commit("search/getsearchItem",this.title)
        this.$store.dispatch('search/getSearchData',[...this.searchData])
        this.$router.history.push('/searchPage')
    },
    searchs(){//input框的onchange事件
        if(this.title!==''){
              this.$store.dispatch('search/getTitleArr',this.title)
              this.searchPage()
          }
    },
    clear(){//点击全部清除按钮
      this.$store.state.search.titleArr=[]
    },//点击历史纪录的span标签 
    biaoqian(e){
      if(e.target.nodeName==='SPAN'){
        // console.log(e.target.innerHTML)
          this.title = e.target.innerHTML
          this.searchData = this.dataList.filter(item=>{
              return item.bookname.indexOf(this.title)!==-1
          })
          this.searchPage()
      }
    },
    shuaxin(){//1 2 3 4
              //5 17
        this.refrshData = this.dataList.slice(Math.floor(Math.random()*4+1),Math.floor(Math.random()*8+5))
        this.$store.commit("search/getRefrshData",this.refrshData)
    }
  },
  watch:{
    title(){
        this.searchData = this.dataList.filter(item=>{
                return item.bookname.indexOf(this.title)!==-1
          })
    }
  }
  
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
@import url("../../../static/fonts/iconfont.css");

.searchpage{
  width:100%;
  height:100%; 
    transition: all 0.5s ease-in-out;
    position: absolute;
    top:0;
    left:0;
    background:white;
}

.search-box {
  width: 100%;
  height:100%;
  overflow-y:auto;

}
.search-top {
  width: 90%;
  height: 1.173333rem;
  margin-left: 3%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.346667rem;
}
.search-top p:nth-child(1) {
  font-size: 0.746667rem;
}
.search-top input {
  width: 7.12rem;
  height: 0.853333rem;
  line-height: 0.533333rem;
  border-radius: 2.666667rem;
  background-color: rgba(245, 245, 245, 100);
  /* text-align: center; */
  padding-left:16px;
  outline: none;
  border: none;
}
.search-main {
  width: 90%;
  margin-left: 5%;
}
.search-history {
  width: 100%;
}
.history-top {
  width: 100%;
  height: 0.933333rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.48rem;
}
.history-main {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.history-main span {
  display: inline-block;
  width: auto;
 height: 28px;
  margin: 8px;
  color: rgba(0, 0, 0, 1);
  font-size: 14px;
  line-height: 28px;
  border-radius: 4px;
  background-color: rgba(247, 247, 247, 100);
  text-align: center;
  padding: 0 10px;
}
.pai-main {
  width: 100%;
  min-height: 6rem;

  display: flex;
  justify-content: space-between;
}
.pai-main div {
  width: 50%;
}
.pai-main div li{
   padding-top: 0.506667rem;
}
.pai-main li:nth-child(1) span:nth-child(1) {
  background: red;
}
.pai-main li:nth-child(2) span:nth-child(1) {
  background: orange;
}
.pai-main li:nth-child(3) span:nth-child(1) {
  background: rgb(233, 233, 31);
}
.pai-main li span:nth-child(1) {
  display: inline-block;
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 100);
  font-size: 11px;
  text-align: center;
  line-height: 0.426667rem;
  border-radius: 4px;
  font-family: PingFangSC-regular;
  background: rgb(230, 228, 228);
}
</style>